<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/tripplanner/index.css">
<link href="/tripplanner" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><style type="text/css"></style><style type="text/css"></style><style type="text/css"></style>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="/tripplanner/index.js"></script>
<script type="text/javascript">
	function showValue(newValue) {
		document.getElementById("range").innerHTML = newValue;
	}
</script>
</head>
<body style="">
	<div class="col-md-5" style="
    margin-left: 28px;
">
		<div class="row">
		<div class="plan_route panel panel-primary">
			<div class="panel-heading">
				<span>Route Planning:</span>
			</div>
			<div class="panel-body">
					<span>How many days so you want to spend in the trip?</span> 
					<select id="travelDays">
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
					</select><br> <br> 
					<span>What's the percentage of family Attractions?</span> <input type="text" id="family" name="family"><br>
					<br> <span>What's the percentage of night life Attractions?</span> <input type="text" id="night" name="night"><br>
					<br> <span>What's the percentage of trekking Attractions?</span>
					<input type="text" id="trekking" name="trekking"><br> <br>
					<span>What's the percentage of extreme Attractions?</span> <input type="text" id="extreme" name="extreme"><br> <br> 
					<span>What's the percentage of culture Attractions?</span> <input type="text" id="culture" name="culture"><br> <br>
					<button id="planRoute" class="btn btn-primary btn-sm" style="float: right; margin-right: 1rem;">Plan Route</button>
			</div>
		</div>
		</div>
			<div class="row">
		<div class="next_attraction panel panel-primary">
			<div class="panel-heading">
				<span>Next Question:</span>
				<button id="getNextQuestion" class="btn btn-primary btn-sm">Get
					Next Question</button>
			</div>
			<div class="panel-body">
			<div class="row" id="question_content"></div>
				<div class="row" id="vote">
					<input type="range" id="votingValue" value="0" min="0" max="10" onchange="showValue(this.value)"> <span id="range">0</span>

					<button id="voteButton" class="btn btn-primary btn-sm" style="float: right; margin-right: 1rem;">Vote!</button>
				</div>
			</div>
		</div>
		</div>
	</div>
	<div class="col-md-3 result-panel" style="
    padding-right: 0px;
">
		<div class="panel panel-primary" style="
    margin-left: 41px;
">
			<div class="panel-heading">Cities:</div>
			<div class="panel-body" id="cities" style="
    height: 664px;
"></div>
		</div>
	</div>
	<div class="col-md-3" style="
    padding-left: 3px;
    float: right;
">
		<div class="panel panel-primary" style="
    margin-right: 5px;
">
			<div class="panel-heading">Attractions:</div>
			<div class="panel-body" id="attractions" style="
    height: 664px;
"></div>
		</div>
	</div>

</body></html>